<template>
	<view class="page-content">
		<u-navbar title="订单详情" :autoBack="true" :bgColor="theme_color" :titleStyle="{color:'#ffffff'}"
			leftIconColor="#ffffff"></u-navbar>
		<view class="goods-box" :style="'margin-top:' + navH + 'px;'">
			<view class="address-box" @click="addressSelect()">
				<view class="address-info acea-row row-between-wrapper" v-if="address.province_name!=undefined">
					<view>
						<view class="addr-info-pcd">{{address.province_name || ''}} {{address.city_name || ''}}
							{{address.district_name || ''}}
						</view>
						<view class="addr-info-detail">{{address.address || ''}}</view>
						<view class="addr-info-connect">
							<text class="addr-info-connect-name">{{address.consignee || ''}}</text>
							{{' '+address.mobile || ''}}
						</view>
					</view>
					<view class="arrow-right-icon">
						<view class='iconfont icon-jiantou'></view>
					</view>
				</view>
				<view class="address-info acea-row row-between-wrapper" v-if="address.province_name==undefined">
					<text>设置收货地址</text>
					<view class="arrow-right-icon">
						<view class='iconfont icon-jiantou'></view>
					</view>
				</view>
				<view class='line'>
					<image :src="ima_url+'/statics/yilangmp/line.jpg'"></image>
				</view>
			</view>
			<!-- 要结算的商品列表 - 以店铺为单位 -->
			<view class="store-goods" v-for="(value,i) in goods_list" :key="i">
				<view class="store-info">
					<image class="store-info-logo"
						:src="ima_url+'/static/Applets/static/images/homepage_icon_dianpu.png' " mode=""></image>
					<text class="store-info-name">{{value.supplier_name}}</text>
				</view>
				<!-- 商品列表 -->
				<view class="store-goods-list" v-for="(item,index) in value.goods_info" :key="index"
					@click="goodsDetails(value.goods_id)" v-if="value.goods_info!=undefined">
					<image class="sto-goo-li-cover" :src="item.goods_thumb" mode="aspectFill"></image>
					<view class="sto-goo-li-info">
						<view class="sto-goo-li-info-top">
							<text class="sto-goo-li-info-name">{{item.goods_name}}</text>
							<view class="sto-goo-li-info-price">
								<text class="sto-goo-li-info-shop-price">¥{{item.shop_price}}</text>
								<text class="sto-goo-li-info-market-price">¥{{item.market_price}}</text>
							</view>
						</view>
						<view class="sto-goo-li-info-center">
							<text class="sto-goo-li-info-attr">规格：{{item.goods_attr || '无'}}</text>
							<text class="sto-goo-li-info-number">x{{item.goods_number}}{{item.unit}}</text>
						</view>
					</view>
				</view>
				<view class="store-goods-list" @click="goodsDetails(value.goods_id)" v-if="value.goods_info==undefined">
					<image class="sto-goo-li-cover" :src="value.goods_img" mode="aspectFill"></image>
					<view class="sto-goo-li-info">
						<view class="sto-goo-li-info-top">
							<text class="sto-goo-li-info-name">{{value.goods_name}}</text>
							<view class="sto-goo-li-info-price">
								<text class="sto-goo-li-info-shop-price">¥{{value.shop_price}}</text>
								<text class="sto-goo-li-info-market-price">¥{{value.market_price}}</text>
							</view>

						</view>
						<view class="sto-goo-li-info-center">
							<text class="sto-goo-li-info-attr">规格：{{value.goods_attr || '无'}}</text>
							<text class="sto-goo-li-info-number">x{{value.goods_number}}{{value.unit}}</text>
						</view>
					</view>
				</view>
				<!-- 配送方式 -->
				<view class="store-goods-item" @click="goods_index = i;  psShowPopup()">
					<text class="sto-goo-item-name">配送方式</text>
					<view class="sto-goo-item-content">
						<text>{{ deliveryMethodText || '商家自定配送'}}</text>
						<text>{{best_time || '商家自定配送时间'}}</text>
					</view>
					<view class="arrow-right-icon">
						<u-icon name="arrow-right" color="#ADADAD" size="20"></u-icon>
					</view>
				</view>
				<!-- 订单备注 -->
				<view class="store-goods-item" @click="goods_index = i; bzShowPopup()">
					<text class="sto-goo-item-name">订单备注</text>
					<view class="sto-goo-item-content">
						<text :class="{'content-null':!goods_list[goods_index].postscript}">
							{{goods_list[goods_index].postscript || '无备注'}}
						</text>
					</view>
					<view class="arrow-right-icon">
						<u-icon name="arrow-right" color="#ADADAD" size="20"></u-icon>
					</view>
				</view>
			</view>
			<view class="red-envelope" @click="bonusSelect()">
				<image class="red-envelope-icon" :src="ima_url+'/static/Applets/static/images/store_hb.png' " mode="">
				</image>
				<text class="red-envelope-text">可用红包</text>
				<view class="arrow-right-icon acea-row">
					<view>-￥{{bonus_price}}</view>
					<u-icon name="arrow-right" color="#ADADAD" size="20"></u-icon>
				</view>
			</view>
			<!-- 支付方式 -->
			<view class="pay-type bg-white">
				<view class="title">
					支付方式
				</view>
				<view class="radio-box">
					<view class="radio-item">
						<u-radio-group>
							<u-radio activeColor="green" shape="circle" label="微信"></u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
			<view class="s-time-box-2 bg-white" style="margin-top: 30rpx;">
				<view class="s-time-title">
					<view>小计</view>
					<view style="color: #D32D3C;">￥{{(total_price_2).toFixed(2)}}</view>
				</view>
			</view>
		</view>

		<view class='footer acea-row row-between-wrapper'>
			<view>合计:
				<text style="color: orangered;font-size: 20px;"
					class="fw-bolder">￥{{(total_price).toFixed(2) || 0}}</text>
			</view>
			<view class='settlement' style='z-index:100' @click="submitOrder()">立即支付</view>
		</view>

		<!-- 选择地址模块 -->
		<u-popup :show="address_show" @close="address_show = false" mode="bottom" :closeable="true" round="8"
			:safeAreaInsetTop="true">
			<view class="select-address">
				<view class="address-item">
					<scroll-view scroll-y="true" style="height: 800rpx;">
						<view class="item-box">
							<view class="ad-txt" @click="addAddress()">添加地址</view>
							<radio-group>
								<view v-for="(value,i) in address_list" :key="i">
									<view class="acea-row row-middle"
										style="margin-bottom: 10px;padding-bottom: 10px;border-bottom: 1px solid #dddddd;">
										<radio @click="radioSelectAddress(value,i)"
											:checked="address.address_id == value.address_id " />
										<view style="padding-left: 10px;" class="fs-12">
											<view class="fw-bolder">
												{{value.consignee}}
											</view>
											<view style="padding: 10px 0;">
												{{value.mobile}}
											</view>
											<view>
												{{value.province_name}} {{value.city_name}} {{value.district_name}}
												{{value.address}}
											</view>
										</view>
									</view>
								</view>
							</radio-group>
						</view>
					</scroll-view>
					<view class="acea-row row-around">
						<view @click="addressCancel()">取消</view>
						<view @click="addressConfirm()">确定</view>
					</view>
				</view>
			</view>
		</u-popup>


		<!-- 红包	 -->
		<u-popup :show="bonus_isShow" @close="bonus_isShow = false" mode="bottom" :closeable="true" round="8" :safeAreaInsetTop="true">
			<view class="red-content-box">
				<scroll-view scroll-y="true" v-bind:style="{'height': scroll_Height_4 }" v-if="bonus_list.length > 0">
					<view class="list_box">
						<radio-group>
							<view v-for="(value,i) in bonus_list" :key="i">
								<view class="radio-box">
									<radio @click="selectRed(i)"
										:checked="min_goods_amount<total_price_3  && bonus_index == i  " />
								</view>
								<view class="red-box">
									<view class="red-list">
										<view class="img-bg">
											<!-- 未使用   used_text  2已使用3已失效4可使用 -->
											<image v-if="value.used_text == '可使用' "
												:src="ima_url+'/static/Applets/static/huawei/Wallet/qbhb2.png' "
												class="img" mode=""></image>
											<!-- 已使用 -->
											<image v-if="value.used_text == '已使用' "
												:src="ima_url+'/statics/yilangmp/ended.png'" class="img" mode="">
											</image>
											<!-- 已失效 -->
											<image v-if="value.used_text == '已失效' "
												:src="ima_url+'/static/Applets/static/huawei/Wallet/qbhb1.png' "
												class="img" mode=""></image>
											<view v-for="(value2,j) in value.bonus_list" :key="j">
												<view class="red-content">
													<view class="left" :class="{'left2':value.used_text != '可使用'} ">
														<view class="money">
															<text class="txt">
																{{value2.type_money}}
															</text>元
														</view>
														<view class="title-m">
															活动红包
														</view>
													</view>
													<view class="right">
														<view class="store-name"
															:class="{'store-name2':value.used_text != '可使用'}">
															<text class="txt">{{value.supplier_name}}</text>
														</view>
														<view class="min-money">
															<text class="txt">使用最低金额：</text>
															{{value2.min_goods_amount}}
														</view>
														<view class="time-box">
															<text class="txt">有效日期：</text>
															{{value2.use_start_date}}
															-
															{{value2.use_end_date}}
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</radio-group>
					</view>
				</scroll-view>
				<view class="massage" v-else>
					<u-empty mode="coupon" icon="http://cdn.uviewui.com/uview/empty/coupon.png" text="没有可用红包">
					</u-empty>
				</view>
			</view>
		</u-popup>


		<!-- 弹出层 - 选配送方式、时间/订单备注 -->
		<u-popup :show="psShow" @close="psShow = false" :round="20" closeable safeAreaInsetBottom closeOnClickOverlay>
			<!-- 配送服务 -->
			<view class="popup-content">
				<view class="popup-content-item">
					<view class="pop-con-item-title">配送方式</view>
					<view>
						<view class="acea-row">
							<view class="padding10">
								<checkbox-group @change="merchantCustomized">
									<label>
										<checkbox value="商家自定" :checked="merchant_isShow" />商家自定
									</label>
								</checkbox-group>
							</view>
							<view class="padding10">
								<checkbox-group @change="optionalDelivery">
									<label>
										<checkbox value="自选配送方式" :checked="optional_isShow" />用户自选
									</label>
								</checkbox-group>
							</view>
						</view>
						<view style="padding: 15rpx 0;" v-if="optional_isShow">
							（<text style="color: #CC0518; font-size:26rpx;">自选没选到具体物流，提交订单后默认商家自定</text> ）
						</view>
						<!-- 配送方式列表 -->
						<view class="acea-row padding10"
							v-if="optional_isShow && goods_list[goods_index].shipping_type">
							<view v-for="(value,index) in goods_list[goods_index].shipping_type" :key="index">
								<text
									style="padding: 15rpx 20rpx; border: 2rpx solid #dddddd; line-height: 1;margin-left: 10px;"
									:style="{'background-color': value.isShow ? '#CC0518' : '','color': value.isShow ? '#ffffff' : ''}"
									@click="payChang(index)">
									{{value.name}}
								</text>
							</view>
						</view>
						<!-- 配送方式列表 -->
						<view
							v-if="optional_isShow && goods_list[goods_index].pay_isShow && goods_list[goods_index].shipping_type"
							class="" style="padding-top: 30rpx;border: none;">
							<scroll-view scroll-y="true" show-scrollbar="true" v-bind:style="{'max-height': 200+'px' }"
								@scrolltolower="LoadingMorePickedUpList">
								<view style="width: 100%;">
									<view
										v-for="(value_4,t) in goods_list[goods_index].shipping_type[goods_list[goods_index].index_shipping_type].shipping_list"
										:key="t">
										<view class="padding10" style="display: flex; align-items: center;"
											@click="payShipping(t)">
											<view style="display: flex; align-items: center;">
												<image v-if="!value_4.isShow"
													style="width: 40rpx; height: 40rpx; margin-right:10rpx;vertical-align: middle;"
													:src="ima_url+'/static/Applets/static/images/no_goods_select.png' "
													mode=""></image>
												<image v-if="value_4.isShow"
													style="width: 40rpx; height: 40rpx;margin-right:10rpx;vertical-align: middle;"
													:src="ima_url+'/static/Applets/static/images/goods_select.png' "
													mode=""></image>
											</view>
											<text class="txt-2">{{value_4.shipping_name}}<text v-if="value_4.juli != ''"
													style="font-size: 24rpx;color: darkred;">{{value_4.juli|juliFilters}}</text></text>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>

					</view>
				</view>
				<view class="popup-content-item">
					<text class="pop-con-item-title">配送时间</text>
					<view class="acea-row">
						<view class="padding10">
							<checkbox-group @change="merchantCustomizedTime">
								<label>
									<checkbox value="商家自定" :checked="best_time_isShow_1" />商家自定
								</label>
							</checkbox-group>
						</view>
						<view class="padding10">
							<checkbox-group @change="optionalDeliveryTime">
								<label>
									<checkbox value="自选配送时间" :checked="best_time_isShow_2" />用户自选
								</label>
							</checkbox-group>
						</view>

					</view>
					<view style="width: 100%;" v-if="best_time_isShow_2">
						<radio-group @change="dataRadioChange">
							<view class="">
								<label for="">
									<radio value="工作日/周末/节假日均可" style="transform: scale(0.8);" />
									<text class="txt-2">工作日/周末/节假日均可</text>
								</label>
							</view>
							<view class="">
								<label for="">
									<radio value="仅工作日送货" style="transform: scale(0.8);" />
									<text class="txt-2">仅工作日送货</text>
								</label>
							</view>
							<view class="">
								<label for="">
									<radio value="仅周末送货" style="transform: scale(0.8);" />
									<text class="txt-2">仅周末送货</text>
								</label>
							</view>
							<view class="">
								<label for="">
									<radio value="指定送货时间" style="transform: scale(0.8);" />
									<text class="txt-2">指定送货时间</text>
								</label>
							</view>
						</radio-group>
					</view>
				</view>
				<view class="popup-content-hint">
					送货时间仅供参考
				</view>
			</view>
		</u-popup>

		<u-popup :show="bzShow" @close="bzShow = false" :round="20" closeable :safeAreaInsetTop="true">
			<!-- 订单备注 -->
			<view class="padding10">
				<textarea  placeholder="订单备注" maxlength="-1" style="border: 1px solid #dddddd;padding: 10px;margin: 10px auto;"
					placeholder-style="font-size:28rpx ;" v-model="goods_list[goods_index].postscript"
					@input="inputPostscript">
							</textarea>
			</view>
		</u-popup>

	</view>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '@/config/app'
	import {
		mapGetters
	} from "vuex";
	import {
		sub_order,
		cart_order,
		picked_up_list,
		epay_submit,
		third_epay_submit
	} from '@/api/store.js'
	import {
		address_edit_add,
		address_list,
		address_del,
		get_regions
	} from '@/api/user'
	import {
		toLogin
	} from '@/libs/login.js';
	export default {
		computed: mapGetters(["isLogin", "app_token"]),
		data() {
			return {
				navH: '',
				theme_color: getApp().globalData.theme_color,
				ima_url: BASE_URL,
				address_list: [],
				address: {}, //存放默认地址
				address_defaul_isShow: false, //判断是否有默认地址
				address_id: '',
				address_show: false,
				address_index: 0,
				scroll_Height: '',
				scroll_Height_2: '',
				scroll_Height_3: '',
				scroll_Height_4: '',

				psShow: false,
				bzShow: false,
				goods_list: [],
				rec_id: '', //购物id
				total_price: 0.00,
				total_price_2: 0.00, //存放原始的价格
				total_price_3: 0, //存放原始的价格
				pay_index: 0,
				pay_index_2: 0,
				pay_shipping_id: '',

				goods_index: 0,
				order_index: 0,
				checked_p1: false,
				checked_p2: false,
				checked_p3: false,

				merchant_isShow: false, //商家自订
				optional_isShow: true, //客户自选
				shipping_type_id: '', //用来存放选中的配送点id

				listBoxStyle: `height:60upx; font-size: 24upx; padding-right:10upx; width:100%;border-radiu:0;`,
				msg: null,
				shipping_type: '',

				state_list: [],
				state_list_name: [],
				state_list_name_count: 0,
				state_id: '-1',
				// 省
				province_list: [],
				province_list_name: [],
				province_list_name_count: 0,
				province_id: '-1',
				// 市
				city_list: [],
				city_list_name: [],
				city_list_name_count: 0,
				city_id: '-1',
				// 区
				area_list: [],
				area_list_name: [],
				area_list_name_count: 0,
				area_id: '-1',


				// 支付方式
				pay_isShow: false,
				pay_type: 7, //支付方式
				pay_id: '',
				pay_name: '平台微信',
				is_pay_show: true,
				payRadioCurrent: 0,

				alipay_isShow: false,
				weixin_isShow: false,

				supplier_id: '', //店铺id

				goods_id: '',
				product_sn: '',
				goods_number: '',
				goods_atrr_img: '',

				// 订单可用红包列表
				bonus_list: [], //红包列表
				bonus_price: '0.00', // 存放选中的红包价格
				bonus_id: '', //红包id
				bonus_isShow: false,
				bonus_index: 0,
				min_goods_amount: 0,

				best_time: '', //配送时间
				best_time_isShow_1: true, //配送时间(商家自定)
				best_time_isShow_2: false, //配送时间(自选)

				isSubmit: 0,
				product_list: '', //货品id_购买数量_单位_单位换算率 逗号拼接
				product_modelshow: false,
				is_use_cash: null,
				deliveryMethodText: '', //配送方式展示文本
				latitude: '',
				longitude: '',
				PickedUpListPage: 1,
				pickup_point: [],
			}
		},
		filters: {
			juliFilters(val) {
				if (val < 1000 && val != null) {
					return '(' + parseFloat(val).toFixed(2) + 'Km)'
				} else if (val >= 1000) {
					return '(' + parseFloat(val / 1000).toFixed(2) + 'Km)'
				} else if (val == null) {
					return ''
				}
			}
		},
		async onLoad(e) {
			this.navH = getApp().globalData.navHeight / 2 - 5;
			this.rec_id = e.rec_id;
			this.supplier_id = e.supplier_id;
			await this.getCartOrder()

			await this.getPickedUpList()
		},
		async onShow() {
			const addressRes = await this.getAddressList()
			this.setDefaultAddress(addressRes.data)
		},
		methods: {
			//获取结算页面
			async getCartOrder(data) {
				const _this = this

				const res = await cart_order({
					app_token: _this.app_token,
					rec_id: _this.rec_id,
				})
				if (res.status == -2) {
					toLogin();
				}
				this.total_price = parseFloat(res.data.total_price);
				this.total_price_2 = parseFloat(res.data.total_price);
				this.total_price_3 = parseInt(res.data.total_price);

				if (res.data.cart_list.length > 0) {

					for (let value of res.data.cart_list) {
						let obj = {};

						if (_this.address_list.length > 0) {
							obj = {
								supplier_name: value.supplier_name,
								shipping_type: [],
								shipping_type_id: '', //用来存放选中的配送点id
								shipping_type_isNull: false,
								shipping_type_isSelect: false,
								goods_info: value.goods_info,
								best_time: '', //配送时间
								postscript: '', //订单备注
								index_shipping_type: 0, //记录选中的那种配送方式
								pay_isShow: false, //是否显示配送方式的配送点
								is_use_cash: value.is_use_cash
							}
						} else {
							obj = {
								supplier_name: value.supplier_name,
								shipping_type: [],
								shipping_type_id: '', //用来存放选中的配送点id
								shipping_type_isNull: false, //用来判断配送方式是否为空
								shipping_type_isSelect: false,
								goods_info: value.goods_info,
								best_time: '', //配送时间
								postscript: '', //订单备注
								index_shipping_type: 0, //记录选中的那种配送方式
								pay_isShow: false, //是否显示配送方式的配送点
								is_use_cash: value.is_use_cash
							}
						}

						if (value.shipping_type.length > 0) {
							for (let item of value.shipping_type) {
								const obj_2 = {
									id: item.id,
									name: item.name,
									configure: item.configure,
									shipping_list: [],
									isShow: false,
									index_shipping_list: 0,
								}
								for (let item_2 of item.shipping_list) {
									let obj_3 = {
										shipping_id: item_2.shipping_id,
										shipping_name: item_2.shipping_name,
										shipping_desc: item_2.shipping_desc,
										shipping_type: item_2.shipping_type,
										isShow: false, //用来判断是否选中
										juli: item_2.juli
									}
									obj_2.shipping_list.push(obj_3);
								}
								obj.shipping_type.push(obj_2);
							}
						} else {
							obj.shipping_type_isNull = true;
							// _this.total_price = _this.total_price - value.goods_total;
							// _this.total_price_2 = _this.total_price - value.goods_total;
							// _this.total_price_3 = parseInt(res.data.total_price);
						}

						_this.goods_list.push(obj);
					}

					this.is_use_cash = _this.goods_list[0].is_use_cash

				}
				return res
			},

			//获取店铺自提点列表
			async getPickedUpList() {
				const Location = await this.getLocation();
				this.latitude = Location.latitude
				this.longitude = Location.longitude
				picked_up_list({
					supplier_id: this.supplier_id,
					lat: this.latitude,
					lng: this.longitude,
					page: this.PickedUpListPage
				}).then(res => {
					this.pickup_point = res.data
					let obj_1 = {
						id: 1,
						name: '门店自提',
						configure: '',
						shipping_list: [],
						isShow: false,
						index_shipping_list: 0,
					}
					for (let item of this.pickup_point) {
						let obj_2 = {
							shipping_id: item.shipping_id,
							shipping_name: item.shipping_name,
							shipping_desc: item.shipping_desc,
							shipping_type: item.shipping_type,
							isShow: false, //用来判断是否选中
							juli: item.juli
						}
						obj_1.shipping_list.push(obj_2);
					}
					this.goods_list[0].shipping_type.unshift(obj_1);
				})
			},
			//获取经纬度
			getLocation() {
				return new Promise(resolve => {
					uni.getLocation({
						type: 'wgs84',
						geocode: true,
						success: (res) => {
							resolve(res)
						}
					})
				})
			},

			//获取地址列表
			async getAddressList() {
				const res = await address_list({
					app_token: this.app_token
				})
				let dataClone = res.data;
				dataClone.reverse()
				// 取默认地址的索引值 -1无默认地址
				const defaultIndex = dataClone.findIndex(val => val.is_default === 1)
				if (defaultIndex != -1) {
					const defaultData = dataClone[defaultIndex]
					dataClone.splice(defaultIndex, 1)
					dataClone.unshift(defaultData)
				}
				this.address_list = dataClone;
				this.setDefaultAddress(res.data)
				return res;
			},

			//设置进入订单页默认选中的地址
			setDefaultAddress(data) {
				if (!data.length) {
					this.address = {};
					return false
				}
				let dataClone = data;
				//反转数组
				dataClone.reverse()
				// 取默认地址的索引值 -1无默认地址
				const defaultIndex = dataClone.findIndex(val => val.is_default === 1)
				if (defaultIndex != -1) {
					this.address = dataClone[defaultIndex]
					this.address_defaul_isShow = true
					this.address_id = dataClone[defaultIndex].address_id
				} else {
					// 无默认地址时取列表的第一个地址
					if (dataClone.length != 0) {
						this.address = dataClone[0];
						this.address_id = dataClone[0].address_id;
					}
				}
			},

			// 显示红包页面
			bonusSelect: function() {
				this.bonus_isShow = true;
			},


			// 选择红包
			selectRed: function(i) {
				this.bonus_index = i;
				this.bonus_price = '0.00';
				this.bonus_id = '';
				var min_goods_amount = parseInt(this.product_list[i].bonus_list[0].min_goods_amount)
				var total_price = parseInt(this.total_price_2);
				this.min_goods_amount = parseInt(this.product_list[i].bonus_list[0].min_goods_amount);
				if (total_price < min_goods_amount) {
					uni.$u.toast('请选择符合条件的红包')
				} else {
					this.bonus_price = this.product_list[i].bonus_list[0].type_money
					this.total_price = parseInt(this.total_price_2) - parseInt(this.bonus_price);
					this.bonus_id = this.product_list[i].bonus_id;
				}
			},

			// 查看商品详情
			goodsDetails: function(goods_id) {
				uni.navigateTo({
					url: '/pages-goods-details/goods_details/goods_details?goods_id=' + goods_id
				})
			},

			// 显示地址选择模块
			addressSelect: function() {
				this.address_show = true;
			},

			radioSelectAddress(item, index) {
				this.address_index = index;
			},
			// 确定地址选择
			addressConfirm: function() {
				if (this.address.province_name != undefined) {
					this.address = this.address_list[this.address_index];
					this.address_id = this.address_list[this.address_index].address_id;
				} else {
					this.address_show = false;
				}
				this.address_show = false;
			},
			// 取消地址选择
			addressCancel: function() {
				this.address_index = 0;
				this.address_show = false;
			},

			// 添加地址
			addAddress: function() {
				uni.navigateTo({
					url: '/pages/users/user_address_list/index'
				})
			},

			// 商家自定配送方式
			merchantCustomized: function(e) {
				this.shipping_type_id = ''
				this.deliveryMethodText = ''
				if (e.detail.value.length != 0) {
					if (e.detail.value[0] == "商家自定") {
						this.merchant_isShow = true; //商家自订
						this.optional_isShow = false; //客户自选
					} else {
						this.merchant_isShow = false; //商家自订
						this.optional_isShow = false; //客户自选
					}
				} else {
					this.merchant_isShow = false; //商家自订
					this.optional_isShow = false; //客户自选
				}
				for (let value_1 of this.goods_list) {
					for (let value of value_1.shipping_type) {
						for (let value_2 of value.shipping_list) {
							value_2.isShow = false;
						}
					}
					for (let value of value_1.shipping_type) {
						value.isShow = false;
					}
				}
				this.shipping_type_id = ''; //用来存放选中的配送点id
			},
			// 自选配送方式 optional merchant
			optionalDelivery: function(e) {
				this.deliveryMethodText = ''
				if (e.detail.value.length != 0) {
					if (e.detail.value[0] == "自选配送方式") {
						this.merchant_isShow = false; //商家自订
						this.optional_isShow = true; //客户自选
					} else {
						this.merchant_isShow = false; //商家自订
						this.optional_isShow = false; //客户自选
					}
				} else {
					this.merchant_isShow = false; //商家自订
					this.optional_isShow = false; //客户自选
				}
				for (let value_1 of this.goods_list) {
					for (let value of value_1.shipping_type) {
						for (let value_2 of value.shipping_list) {
							value_2.isShow = false;
						}
					}
					for (let value of value_1.shipping_type) {
						value.isShow = false;
					}
				}

				this.shipping_type_id = ''; //用来存放选中的配送点id
			},

			// 自选配送方式选择
			// 配送方式选择
			payChang: function(k) {
				this.shipping_type_id = ''
				this.pay_index = k;
				this.deliveryMethodText = ''
				for (let value of this.goods_list[this.goods_index].shipping_type) {
					for (let value_2 of value.shipping_list) {
						value_2.isShow = false;
					}
				}
				for (let value of this.goods_list[this.goods_index].shipping_type) {
					value.isShow = false;
				}
				this.goods_list[this.goods_index].index_shipping_type = this.pay_index;
				this.goods_list[this.goods_index].shipping_type[this.pay_index].isShow = true;
				this.goods_list[this.goods_index].pay_isShow = true;
			},

			// 配送点选择
			payShipping: function(t) {
				this.pay_index = this.goods_list[this.goods_index].index_shipping_type;
				this.goods_list[this.goods_index].shipping_type[this.pay_index].index_shipping_list = t;
				var index_shipping_list = this.goods_list[this.goods_index].shipping_type[this.pay_index]
					.index_shipping_list;
				for (let value of this.goods_list[this.goods_index].shipping_type) {
					for (let value_2 of value.shipping_list) {
						value_2.isShow = false;
					}
				}
				this.goods_list[this.goods_index].shipping_type[this.pay_index].shipping_list[index_shipping_list]
					.isShow = true;
				var id = this.goods_list[this.goods_index].shipping_type[this.pay_index].shipping_list[
					index_shipping_list].shipping_id;
				this.goods_list[this.goods_index].shipping_type_id = id;
				this.shipping_type_id = id; //用来存放选中的配送点id
				this.deliveryMethodText = this.goods_list[this.goods_index].shipping_type[this.pay_index]
					.shipping_list[index_shipping_list].shipping_name
			},

			// 商家自定配送时间
			merchantCustomizedTime: function(e) {
				if (e.detail.value.length != 0) {
					if (e.detail.value[0] == "商家自定") {
						this.best_time_isShow_1 = true; //商家自订
						this.best_time_isShow_2 = false; //客户自选
					} else {
						this.best_time_isShow_1 = false; //商家自订
						this.best_time_isShow_2 = false; //客户自选
					}
				} else {
					this.best_time_isShow_1 = false; //商家自订
					this.best_time_isShow_2 = false; //客户自选
				}
				this.best_time = ''; //配送时间
			},

			optionalDeliveryTime: function(e) {
				if (e.detail.value.length != 0) {
					if (e.detail.value[0] == "自选配送时间") {
						this.best_time_isShow_1 = false; //商家自订
						this.best_time_isShow_2 = true; //客户自选
					} else {
						this.best_time_isShow_1 = false; //商家自订
						this.best_time_isShow_2 = false; //客户自选
					}
				} else {
					this.best_time_isShow_1 = false; //商家自订
					this.best_time_isShow_2 = false; //客户自选
				}
				this.best_time = ''; //配送时间
			},

			// 配送时间选择
			dataRadioChange: function(e) {
				this.goods_list[this.goods_index].best_time = e.detail.value;
				this.best_time = e.detail.value;
			},

			// 订单留言
			inputPostscript: function(e) {
				this.goods_list[this.goods_index].postscript = e.detail.value;
			},

			/*
			 *显示选择配送方式和时间/订单备注的弹出层
			 * @param {string} type 显示类型 ps 配送方式和时间，bz 订单备注
			 */
			psShowPopup() {
				this.psShow = true;
				this.payChang(0)
				this.payShipping(0)
			},
			bzShowPopup() {
				this.bzShow = true;
			},

			async LoadingMorePickedUpList() {
				this.PickedUpListPage++;
				const result = await picked_up_list({
					supplier_id: this.supplier_id,
					lat: this.latitude,
					lng: this.longitude,
					page: this.PickedUpListPage
				})
				if (result.status != -2) {
					if (result.status == 1) {
						this.pickup_point = result.data
						for (let item of this.pickup_point) {
							let obj_2 = {
								shipping_id: item.shipping_id,
								shipping_name: item.shipping_name,
								shipping_desc: item.shipping_desc,
								shipping_type: item.shipping_type,
								isShow: false, //用来判断是否选中
								juli: item.juli
							}
							this.goods_list[0].shipping_type[0].shipping_list.push(obj_2);
						}

					}
				}

			},

			// 提交订单
			submitOrder: function() {
				var that = this;
				for (let value of this.goods_list) {
					if (this.is_pay_show == true) {
						var rec_id = '';
						if (value.goods_info.length == 1) {
							for (let item of value.goods_info) {
								rec_id = item.rec_id;
							}
						} else if (value.goods_info.length > 1) {
							var index_1 = 0;
							var index_2 = 0;
							for (let item of value.goods_info) {

								index_1++;
							}
							rec_id = value.goods_info[0].rec_id;
							for (let item of value.goods_info) {
								index_2++;
								if (index_2 < index_1) {
									rec_id = rec_id + ',' + value.goods_info[index_2].rec_id;
								}

							}
						}

						this.isSubmit++

						if (this.isSubmit == 1) {
							sub_order({
								app_token: that.app_token,
								rec_id: rec_id,
								address_id: that.address_id,
								shipping_id: that.shipping_type_id,
								best_time: that.best_time,
								postscript: value.postscript,
								pay_type: that.pay_type,
								pay_id: that.pay_id,
								bonus_id: that.bonus_id,
								pay_name: that.pay_name,
								froms: '三宝物联小程序',
								salesman: that.$Cache.get('PARENT_ID') || getApp().globalData.parent_id,
							}).then((res) => {
								// 支付方式: 1平台支付宝2平台微信3商家支付宝4商家微信5商家网银
								if (res.status != -1) {
									if (that.pay_type == 7) {
										// #ifdef MP-WEIXIN
										wx.login({
											success(res1) {
												// 2、提取 code
												var code = res1.code;
												// 商家微信支付
												third_epay_submit({
													out_trade_no: res.data, //订单号
													title: '三宝物联小程序', //	可传商家名，也可留空
													type: 'wechat', //支付方式 支付宝：alipay 微信：wechat
													method: 'miniapp', //电脑支付：web 手机网页支付：wap app支付：app 扫码支付：scan 刷卡支付：pos 小程序支付:miniapp
													app_token: that.app_token,
													code: code //微信小程序需要·
												}).then((res3) => {
													console.log('商家微信支付')
													uni.hideLoading()
													var data = JSON.parse(res3.data);
													uni.requestPayment({
														provider: 'wxpay',
														timeStamp: data.timeStamp,
														nonceStr: data.nonceStr,
														package: data.package,
														signType: data.signType,
														paySign: data.paySign,
														success: function(res4) {
															uni.showModal({
																title: '提示',
																content: '微信支付成功',
																cancelText: '继续逛逛',
																confirmText: '查看订单',
																success: function(
																	res
																) {
																	if (res
																		.confirm
																	) {
																		uni.redirectTo({
																			url: '/pages/order/order_list/index/index'
																		})
																	} else if (
																		res
																		.cancel
																	) {
																		uni.navigateBack()
																	}
																},
															});
														},
														fail: function(err) {
															console.log(err)
															uni.redirectTo({
																url: '/pages/order/order_list/index/index?current=1'
															})
														}
													});
												})
											}
										})
										// #endif
									}
								} else {
									uni.showModal({
										content: res.msg,
										showCancel: false
									})
									this.isSubmit = 0
								}
							})
						} else {
							uni.showLoading({
								title: '正在提交订单'
							})
							setTimeout(() => {
								uni.hideLoading()
							})
						}

					} else {
						// #ifdef MP-WEIXIN
						wx.showModal({
							content: '请先选择支付方式',
							showCancel: false,
							confirmText: '关闭',
							success(res) {
								if (res.confirm) {
									console.log('用户点击确定')
								} else if (res.cancel) {
									console.log('用户点击取消')
								}
							}
						})
						// #endif

						// #ifndef MP-WEIXIN
						uni.showLoading({
							title: '请先选择支付方式'
						});
						setTimeout(function() {
							uni.hideLoading();
						}, 1500);
						// #endif

					}
				}

			},

		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		width: 100%;
		background-color: #EEEEEE;

		.goods-box {
			width: 100%;
			padding-bottom: 100px;

			.address-box {
				width: 100%;
				background: linear-gradient(to bottom, $theme_color 0%, #f5f5f5 100%);
				padding-top: 10px;

				.address-info {
					width: 710rpx;
					margin: 0 auto;
					padding: 14px 15px;
					background-color: #fff;
					box-sizing: border-box;

					.addr-info-pcd {
						color: #929292;
					}

					.addr-info-detail {
						color: #000000;
					}

					.addr-info-connect {
						color: #929292;

						.addr-info-connect-name {
							color: #595959;
						}
					}
				}

				.line {
					width: 710rpx;
					margin: 0 auto;
					height: 3rpx;

					image {
						width: 100%;
						height: 100%;
						display: block;
					}
				}
			}

			.store-goods {
				width: 100%;
				padding: 20rpx 30rpx;
				margin-top: 10px;
				border-radius: 12rpx;
				box-sizing: border-box;
				background-color: #FFFFFF;

				.store-info {
					display: flex;
					align-items: center;

					.store-info-logo {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}

					.store-info-name {
						font-size: 28rpx;
						color: #000000;
						font-weight: 600;
						line-height: 1;
					}
				}

				.store-goods-list {
					display: flex;
					margin-top: 30rpx;

					.sto-goo-li-cover {
						flex: none;
						width: 200rpx;
						height: 200rpx;
						margin-right: 15rpx;
					}

					.sto-goo-li-info {
						flex: 1;
						min-width: 0;

						.sto-goo-li-info-top {
							display: flex;
							width: 100%;

							.sto-goo-li-info-name {
								flex: 1;
								font-size: 28rpx;
								// white-space: nowrap;
								overflow: hidden;
								line-clamp: 2;
								text-overflow: ellipsis;
							}

							.sto-goo-li-info-price {
								display: flex;
								flex-direction: column;
								flex: none;
								padding-left: 15rpx;

								.sto-goo-li-info-shop-price {
									text-align: right;
									font-size: 28rpx;
								}

								.sto-goo-li-info-market-price {
									text-align: right;
									flex: none;
									font-size: 24rpx;
									color: #959595;
									text-decoration: line-through;
								}
							}


						}

						.sto-goo-li-info-center {
							display: flex;
							width: 100%;
							color: #959595;
							font-size: 28rpx;

							.sto-goo-li-info-attr {
								flex: 1;
							}

							.sto-goo-li-info-number {
								text-align: right;
								flex: none;
								padding-left: 15rpx;
							}
						}

					}

				}

				.store-goods-item {
					display: flex;
					align-items: center;
					margin-top: 30rpx;

					.sto-goo-item-name {
						font-size: 28rpx;
						flex: none;
						font-weight: 600;
					}

					.sto-goo-item-content {
						display: flex;
						align-items: center;
						flex-direction: column;
						flex: 1;
						min-width: 0;
						padding: 0 20rpx;
						box-sizing: border-box;

						text {
							width: 100%;
							font-size: 26rpx;
							text-align: right;
							height: 35rpx;
							line-height: 35rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.content-null {
							color: #959595;
						}
					}

					.arrow-right-icon {
						flex: none;
					}
				}

			}

			.red-envelope {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				width: 100%;
				height: 100rpx;
				padding: 0 30rpx;
				border-radius: 12rpx;
				box-sizing: border-box;
				background-color: #FFFEFF;

				.red-envelope-icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}

				.red-envelope-text {
					flex: 1;
				}

				.arrow-right-icon {}
			}


			.goods {
				width: 100%;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				background-color: #FFFFFF;

				.title {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					padding-left: 70rpx;
					position: relative;

					.img {
						width: 45rpx;
						height: 45rpx;
						position: absolute;
						top: 10rpx;
						left: 12rpx;

						image {
							width: 45rpx;
							height: 45rpx;
							object-fit: cover;

						}
					}
				}

				.title2 {
					line-height: 40rpx;
					font-size: 24rpx;
					color: #CC0518;
					padding-left: 0rpx;
					padding: 0 20rpx;
				}

				.goods-item {
					width: 100%;
					margin-bottom: 5rpx;
					padding: 30rpx;
					padding-right: 10rpx;
					background-color: #F2F2F2;
					display: flex;

					.left {
						flex: 1;
						height: 200rpx;

						.img {
							width: 200rpx;
							height: 200rpx;
							margin: 0 auto;

							image {
								width: 200rpx;
								height: 200rpx;
								object-fit: cover;
							}
						}
					}

					.right {
						flex: 3;
						padding-right: 150rpx;
						padding-left: 20rpx;
						position: relative;

						.name {
							width: 100%;
							line-height: 50rpx;
							// 多行省略号
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
						}

						.modle {
							width: 100%;
							line-height: 50rpx;
							color: #AEAEAE;
						}

						.number {
							position: absolute;
							top: 0rpx;
							right: 10rpx;

							text-align: right;

							.price {
								line-height: 50rpx;
							}

							.old-price {
								line-height: 60rpx;
								color: #9C9C9C;
								text-decoration: line-through;
							}

							.number-number {
								line-height: 50rpx;
								color: #9C9C9C;
							}
						}
					}
				}

				.pay-methods {
					width: 100%;
					padding: 20rpx;

					.pay-title {
						width: 100%;
						height: 80rpx;
						line-height: 80rpx;
						padding-left: 50rpx;
						position: relative;
						border-bottom: 2rpx solid #DEDEDE;

						.img {
							width: 40rpx;
							height: 40rpx;
							position: absolute;
							top: 10rpx;
							left: 0;

							image {
								width: 40rpx;
								height: 40rpx;
								object-fit: cover;
							}
						}
					}
				}
			}

			.pay-type {
				margin-top: 30rpx;

				.title {
					padding: 10px 10px;
				}

				.radio-box {
					.radio-item {
						height: 80rpx;
						padding: 0 20rpx;
						display: flex;
					}
				}
			}

			.s-time-box-2 {
				padding: 0 30rpx;

				.s-time-title {
					padding: 10px 0;
					display: flex;
					align-items: center;
					width: 100%;
					justify-content: space-between;
				}
			}
		}


		.footer {
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			padding: 0 30rpx;
			font-size: 28rpx;
			color: #333;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9;

			.settlement {
				font-size: 30rpx;
				color: #fff;
				width: 240rpx;
				height: 70rpx;
				background-color: rgba(233, 51, 35, 1);
				border-radius: 50rpx;
				text-align: center;
				line-height: 70rpx;
			}
		}

		.select-address {
			.address-item {
				margin: 10px;
				background-color: #FFFEFF;

				.item-box {
					padding: 30rpx;

					.ad-txt {
						height: 100rpx;
						line-height: 100rpx;
						text-align: right;
					}

					.item {
						font-size: 24rpx;
						width: 100%;
						line-height: 50rpx;
						margin-bottom: 20rpx;
						padding-bottom: 20rpx;
						border-bottom: 1rpx solid #DEDEDE;
						position: relative;

						.txt {
							padding-left: 60rpx;
						}

						.edit {
							width: 45rpx;
							height: 45rpx;
							position: absolute;
							top: 0rpx;
							right: 0rpx;

						}

						.delete {
							position: absolute;
							top: 65rpx;
							right: 0rpx;
						}

						.txt-mo {
							padding-left: 20rpx;
						}

						.txt-ad {
							display: inline-block;
							padding-left: 65rpx;
							padding-right: 60rpx;
						}

						.txt-na {
							font-weight: 600;
						}
					}

					.item2 {
						padding-left: 60rpx;
					}
				}

			}
		}

		.red-content-box {
			.list_box {
				padding-top: 70rpx;
				width: 100%;

				.radio-box {
					margin-top: 40rpx;
					width: 100%;
					height: 50rpx;
					line-height: 50rpx;
				}

				.red-box {
					width: 100%;
					text-align: center;

					.red-list {
						width: 95%;
						margin: auto;

						.img-bg {
							width: 100%;
							height: 300rpx;
							border-radius: 20rpx;
							position: relative;
							margin-bottom: 20rpx;

							.img {
								width: 100%;
								height: 300rpx;
								border-radius: 20rpx;
							}

							.red-content {
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								width: 100%;
								padding: 10rpx;
								display: flex;

								.left {
									flex: 1;

									.money {
										width: 100%;
										line-height: 80rpx;
										padding-top: 50rpx;
										color: #FFFFFF;
										text-align: center;

										.txt {
											font-size: 50rpx;
											padding-right: 10rpx;
											line-height: 80rpx;
										}
									}

									.title-m {
										width: 100%;
										text-align: center;
										font-size: 28rpx;
										color: #FFFFFF;
										line-height: 40rpx;
									}
								}

								.left2 {
									padding-top: 20rpx;
								}

								.right {
									flex: 2;
									padding-left: 20rpx;
									text-align: left;
									padding-top: 20rpx;

									.store-name {
										width: 100%;
										height: 100rpx;
										font-size: 30rpx;
										font-weight: bold;

										.txt {
											display: -webkit-box;
											line-height: 40rpx;
											word-break: break-all;
											-webkit-box-orient: vertical;
											-webkit-line-clamp: 2;
											overflow: hidden;
											text-overflow: ellipsis;
										}
									}

									.store-name2 {
										padding-top: 30rpx;
										height: 80rpx;

										.txt {
											line-height: 30rpx;
										}
									}

									.min-money {
										width: 100%;
										line-height: 60rpx;
										font-size: 26rpx;

										.txt {
											padding-right: 10rpx;
										}
									}

									.time-box {
										width: 100%;
										font-size: 26rpx;
										position: relative;

										.txt {
											padding-right: 10rpx;
										}

										.txt2 {
											position: absolute;
											bottom: 0rpx;
											right: 10rpx;
											padding: 8rpx 20rpx;
											background-color: #FF7A00;
											color: #FFFFFF;
											font-size: 24rpx;
											line-height: 30rpx;
											border-radius: 20rpx;
										}

										.txt3 {
											position: absolute;
											bottom: 0rpx;
											right: 30rpx;
											padding: 8rpx 20rpx;
											background-color: #000000;
											color: #FFFFFF;
											font-size: 24rpx;
											line-height: 30rpx;
											border-radius: 20rpx;
										}

									}

								}
							}
						}


					}
				}

				.box {
					width: 100%;

					.list {
						width: 100%;
						padding: 20upx;
						display: flex;
						flex-direction: row;
						padding-bottom: 30rpx;
						border-bottom: 1rpx solid #DEDEDE;

						.left {
							flex: 1;
							text-align: center;

							.img {
								margin: auto auto;

								image {
									width: 150upx;
									height: 150upx;
								}
							}
						}

						.right {
							flex: 2;
							padding-right: 50upx;
							position: relative;

							.name {
								padding-bottom: 10upx;
							}

							.article_number {
								padding-bottom: 10upx;
							}

							.icon {
								position: absolute;
								top: 20upx;
								right: 10upx;

								.img_1 {
									width: 35upx;
									height: 35upx;
									border: 2upx solid #969696;
									border-radiu: 5upx;
								}

								.img_2 {
									width: 35upx;
									height: 35upx;
									border: 2upx solid #C50A1D;
									border-radiu: 5upx;

									image {
										width: 35upx;
										height: 35upx;
									}
								}
							}
						}
					}
				}

			}

			.massage {
				padding-top: 20px;
				padding-bottom: 30px;
			}
		}

	
		.popup-content {
			overflow-y: auto;
			.popup-content-item {
				margin-bottom: 30rpx;
				.pop-con-item-title {
					font-size: 28rpx;
					font-weight: 600;
					padding: 15rpx;
					text-align: center;
				}
			}

			.popup-content-hint {
				color: #A7A7A7;
				font-size: 22rpx;
				padding-bottom: 10px;
			}

			.popup-content-confirm {
				width: 690rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
				border-radius: 80rpx;
				background-color: #C60B1C;
			}
		}
	}
</style>